<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/layui/css/layui.css"
	media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div class="demoTable">
		搜索名字：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn" data-type="reload" id="adduser">新增用户</button>
	</div>

	<!-- 弹出层的Div -->
	<div id="editDiv" style="display: none">
		<form class="layui-form" action="" lay-filter="example" id="formdiv">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="userName" id="userName" lay-verify="title"
						autocomplete="off" placeholder="请输用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="userSex" id="userSex1" value="男"
						title="男"> <input type="radio" name="userSex"
						id="userSex2" value="女" title="女">
				</div>
			</div>
			<input type="hidden" name="userPwd" value="123">
			 <input type="hidden" name="userId" id="userId" >
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="text" name="userTel" id="userTel" lay-verify="title"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">住址</label>
				<div class="layui-input-block">
					<input type="text" name="userAddress" id="userAddress"
						lay-verify="title" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">等级</label>
				<div class="layui-input-block">
					<input type="radio" name="userLevel" id="userLevel1" value="0"
						title="管理员"> <input type="radio" name="userLevel"
						id="userLevel2" value="1" title="普通用户">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">用户状态</label>
				<div class="layui-input-block">
					<input type="radio" name="userState" id="userState1" value="0"
						title="禁用"> <input type="radio" name="userState"
						id="userState2" value="1" title="启用">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> 
					<!-- <input type="button"  class="layui-btn" lay-submit="" lay-filter="demo1" value="立即提交" id="sub2"> -->
				</div>
			</div>
		</form>
	</div>
	
	<!-- 弹出层的2Div -->
	<div id="addDiv" style="display: none">
		<form class="layui-form" action="" lay-filter="example" id="adddiv">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="userName"  lay-verify="title"
						autocomplete="off" placeholder="请输用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="userPwd"  lay-verify="title"
						autocomplete="off" placeholder="请输密码" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="userSex" value="男"
						title="男"> <input type="radio" name="userSex"
						 value="女" title="女">
				</div>
			</div>
			 <input type="hidden" name="userId"  value="0">
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="text" name="userTel"  lay-verify="title"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">住址</label>
				<div class="layui-input-block">
					<input type="text" name="userAddress" 
						lay-verify="title" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">等级</label>
				<div class="layui-input-block">
					<input type="radio" name="userLevel"  value="0"
						title="管理员"> <input type="radio" name="userLevel"
						 value="1" title="普通用户">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">用户状态</label>
				<div class="layui-input-block">
					<input type="radio" name="userState"  value="0"
						title="禁用"> <input type="radio" name="userState"
						 value="1" title="启用">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="demo2">立即提交</button> 
				</div>
			</div>
		</form>
	</div>
	
	
	<table class="layui-hide" id="test" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remake">重置密码</a>
</script>


	<script src="${pageContext.request.contextPath }/layui/layui.js"
		charset="utf-8"></script>
			<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test',
				url : 'users',
				toolbar : '#toolbarDemo',
				title : '用户数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'userId',
					title : '编号',
					width : 80,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'userName',
					title : '用户名',
					width : 120,
					edit : 'text'
				}, {
					field : 'userSex',
					title : '性别',
					width : 80,
					edit : 'text',
					sort : true
				}, {
					field : 'userTel',
					title : '电话号码',
					width : 150
				}, {
					field : 'userAddress',
					title : '地址',
					width : 300
				}, {
					field : 'userLevel',
					title : '等级',
					width : 120,
					sort : true,
					templet : function(res) {
						if (res.userLevel == 1) {
							return '<span> 普通用户 </span>'
						}
						if (res.userLevel == 0) {
							return '<span>管理员</span>'
						}
					}
				}, {
					field : 'userState',
					title : '状态',
					width : 120,
					templet : function(res) {
						return res.userState == 0 ? "禁用" : "启用"
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 250
				} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						$.ajax({
							url : 'users/'+data.userId,
							type : "delete",
							data : {
							},
							success : function(data) {
								layer.msg(data.msg, {
									icon : 1,
									time : 2000
								});
								obj.del();
							}
						})
						layer.close(index);
					});
				} else if (obj.event === 'edit') { //修改功能
					//给元素赋值
					$("#userName").attr("value", data.userName);
					$("#userId").attr("value", data.userId);
					if (data.userSex === "男") {
						$("#userSex1").attr("checked", "checked");
					} else if (data.userSex === "女") {
						$("#userSex2").attr("checked", "checked");
					}
					$("#userTel").attr("value", data.userTel);
					$("#userAddress").attr("value", data.userAddress);
				
					if (data.userLevel === 0) {
						$("#userLevel1").attr("checked", "checked");
					} else {
						$("#userLevel2").attr("checked", "checked");
					}
					if (data.userState === 0) {
						$("#userState1").attr("checked", "checked");
					} else {
						$("#userState2").attr("checked", "checked");
					}
					
					layer.open({
						type : 1,
						area : [ '600px', '500px' ],
						shade : 0.6,
						id : 'LAY_layuipro',
						content : $("#editDiv").html(),
					});
					layui.form.render();
					/* $(document).on("click", "#sub2", function() {
						console.log($("#formdiv").serialize())
						$.ajax({
							url : 'edituser',
							type : "post",
							data :  $("#formdiv").serialize(),//传输的数据
							dataType : "json",
							success : function(data) {
								layer.msg(data.msg, {
									icon : 1,
									time : 2000
								});
							}
						});
					}); */
					
					/* layer.prompt({
					  formType: 2
					  ,value: data.email
					}, function(value, index){
					  obj.update({
					    email: value
					  });
					  layer.close(index);
					}); */
				}
			});

			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							// key: {
							content : demoReload.val()
						//}
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/* $(document).on("click", "#sub2", function() {
				console.log($("#formdiv").serialize())
				$.ajax({
					url : 'edituser',
					type : "post",
					data :  $("#formdiv").serialize(),//传输的数据
					dataType : "json",
					success : function(data) {
						layer.msg(data.msg, {
							icon : 1,
							time : 2000
						});
					}
				});
			}); */
			$("#adduser").click(function(){
				layer.open({
					type : 1,
					area : [ '600px', '500px' ],
					shade : 0.6,
					id : 'LAY_layuipro',
					content : $("#addDiv").html(),
				});
				layui.form.render();
			});
			
			layui.form.on('submit(demo1)',function(data){
				var d = data.field;
				$.ajax({
					url : 'users',
					type : "put",
					data : JSON.stringify(data.field),
					contentType : "application/json", 
					dataType : "json",
					success : function(data) {
						if(data.msg=="修改成功"){
						layer.msg(data.msg, {
							icon : 1,
							time : 2000
						},function(){
							if(data.msg=="修改成功"){
								parent.layer.closeAll();//关闭所有,简单粗暴
								window.parent.location.reload();//刷新父页面
							}
						});
						}else {
							layer.msg(data.msg, {
								icon : 2,
								time : 2000
							});
						}
					}
				});
				return false;
			});
			
			
			layui.form.on('submit(demo2)',function(data){
				var d = data.field;
				$.ajax({
					url : 'users',
					type : "post",
					data : d,//传输的数据
					dataType : "json",
					success : function(data) {
						if(data.msg=="新增成功"){
						layer.msg(data.msg, {
							icon : 1,
							time : 2000
						},function(){
							if(data.msg=="新增成功"){
								parent.layer.closeAll();//关闭所有,简单粗暴
								window.parent.location.reload();//刷新父页面
							}
						});
						}else {
							layer.msg(data.msg, {
								icon : 2,
								time : 2000
							});
						}
					}
				});
				return false;
			});
			
		});
		
	</script>


</body>
</html>